<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>OcrLlmSDK</title>
    <script src="./dist/index.global.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            font-size: 14px;
        }

        h1,
        h2,
        h3 {
            color: #333;
            padding: 0 0 10px 0;
            margin: 0;
        }

        p {
            color: #666;
            padding: 0 0 5px 0;
            margin: 0;
        }

        #task-statistic,
        #task-list,
        #task-result {
            border: 1px solid #ccc;
            padding: 5px 10px;
            margin-bottom: 10px;
        }

        .task-item,
        .task-result-item {
            border-bottom: 1px solid #eee;
            padding: 5px 0;
        }

        .task-item:last-child,
        .task-result-item:last-child {
            border-bottom: none;
        }
    </style>
</head>

<body>
    <h1 style="text-align: center;">OCR LLM SDK Test</h1>
    <p style="margin-bottom: 10px;text-align: center;">Open the console to see the results.</p>

    <div id="task-statistic"></div>
    <div id="task-list"></div>
    <div id="task-result"></div>
</body>

<script>
    function delay(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    async function runTasks() {
        const fileUrl = "http://127.0.0.1:9000/common/download?fileName=t3.jpg";
        const SDK = new window.OcrLlm.default({
            baseURL: 'http://127.0.0.1:9000',
            apiKey: 'sk-84fcf9c6a83a4aec8089ddc26e672fbd',
            type: 'ocr-llm',
            scenario: 'material_label',
            debug: true,
            logLevel: "debug"
        });
        SDK.startListening()
        SDK.onProcessing((tasks, taskResults) => {
            processLen = tasks.filter(task => JSON.stringify(task).includes('processing')
                || JSON.stringify(task).includes('pending')).length;

            document.getElementById('task-statistic').innerHTML = `
                <h2>当前任务汇总</h2>
                <p>
                    <span> 处理中: ${processLen} </span> | <span> 任务数: ${tasks.length} </span>
                </p>
            `;

            document.getElementById('task-list').innerHTML = `
                <h2>当前任务列表</h2>
            `;

            tasks.forEach(element => {
                document.getElementById('task-list').innerHTML += `
                    <div class="task-item">
                        <p>任务状态: ${JSON.stringify(element)}</p>
                    </div>
                `;
            });

            document.getElementById('task-result').innerHTML = `
                <h2>当前任务结果</h2>
            `;
            taskResults.forEach(element => {
                document.getElementById('task-result').innerHTML += `
                    <div class="task-result-item">
                        <h3>ID: ${element.task_id}</h3>
                        <p>状态: ${element.status}</p>
                        <p>结果: ${JSON.stringify(element)}</p>
                    </div>
                `;
            });
        });

        
        for (let index = 0; index < 5; index++) {
            const res = await SDK.createTaskByBinary(fileUrl);
            const waitTime = Math.floor(Math.random() * 2000) + 1000;
            await delay(waitTime);
        }

        await SDK.createByUrl(fileUrl)
    }

    runTasks();
</script>


</html>